<template>
  <div class="container">
    <div class="swiper">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="#3ACE8A">
        <van-swipe-item v-for="(image, index) in data.imgs" :key="index">
          <img :src="'//jmcshop.xxcf.net/' + image" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="content">
      <div class="name">{{ data.name }}</div>
      <div class="number">商品编号：{{ data.goods_num }}</div>
      <div class="mouny">
        <div>价格：</div>
        <div class="text" v-if="data.status == 0">
          ￥<span style="font-size: 1.5rem">{{ this.money }}</span>
        </div>
        <div class="text" v-if="data.status != 0">
          ￥<span style="font-size: 1.5rem">{{ this.mouny }}</span>
        </div>
      </div>
      <div class="stock">
        <span style="color: #333333; margin-right: -25%">上架数量</span
        >库存数量：{{ data.kucun }}
        <van-stepper
          v-model="stock"
          min="1"
          :max="data.kucun"
          disable-input
          integer
        />
      </div>
      <div class="entrust">
        <div style="color: #333333">委托代卖费</div>
        <div>{{ `￥ ${(this.stock * this.mouny * this.sjsxf).toFixed(2)}` }}</div>
      </div>
      <div class="check" v-if="data.status == 0">
        <van-checkbox v-model="checked" checked-color="#3ACE8A" shape="square"
          >我同意知玉斋平台<span style="color: #3ace8a" @click.stop="agreement"
            >《用户协议》</span
          ></van-checkbox
        >
      </div>
    </div>

    <div class="comContent">
      <div class="comTitle">商品详情</div>
      <div style="margin-top: 20px" v-html="data.content"></div>
    </div>

    <div class="buttonList">
      <div @click="returnFn">返回列表</div>
      <div @click="addFn" v-if="data.status == 0">委托代卖</div>
      <div @click="addFn" v-if="data.status == 2">取消委托</div>
    </div>

    <van-dialog v-model="show" :title="`请上传支付凭证，金额${(this.stock * this.mouny * this.sjsxf).toFixed(2)}元`" @confirm="onConfirm" showCancelButton showConfirmButton confirmButtonText="上传凭证">
        <img :src="skm" alt="" width="250" height="350" style="display: block;margin: 10px auto">
    </van-dialog>

    <van-dialog
      v-model="pamShow"
      class="diaImg"
      closeOnClickOverlay
      :showConfirmButton="false"
    >
      <div class="image">
        <img src="../../assets/img5.png" alt="" />
      </div>
      <div class="butList">
        <van-uploader
          class="uploader"
          result-type="file"
          :after-read="afterRead"
        >
          <van-button type="primary" class="diaButton" accept="image/*"
            >相册选择</van-button
          >
        </van-uploader>
        <van-uploader
          class="uploader"
          :after-read="afterRead"
          result-type="file"
          capture="camera"
          accept="image/*"
        >
          <van-button plain type="primary" class="diaButton"
            >拍摄凭证</van-button
          >
        </van-uploader>
      </div>
    </van-dialog>

    <van-dialog v-model="payShowTwo" :showConfirmButton="false">
      <img :src="imageUrl" class="dialogImg" width="50" height="300" />
      <div class="dialogTitle">
        <van-button type="default" class="myButton" @click="tijiao(0)"
          >重选</van-button
        >
        <van-button type="primary" class="myButton" @click="tijiao(1)"
          >确定</van-button
        >
      </div>
    </van-dialog>
  </div>
</template>

<script>
import { getGoodInfo, upGood, imgUrl, lowerGood, upLoad, getConfig } from "../../api/api";
export default {
  data() {
    return {
      data: {},
      stock: 0,
      checked: false,
      show: false,
      mouny: 0,
      payShowTwo: false,
      pamShow: false,
      imageUrl: "",
      fileList: [],
      money: 0,
      skm: imgUrl + JSON.parse(localStorage.getItem('config')).sxcf_qrcode,
      yjbl: JSON.parse(localStorage.getItem('config')).yjbl,
      zfbl: JSON.parse(localStorage.getItem('config')).zfbl,
      sjsxf: JSON.parse(localStorage.getItem('config')).sjsxf,
    };
  },
  methods: {
    getConfigInfo() {
      getConfig().then((res) => {
        this.beginDate = res.data[0].begin_date
        this.endDate = res.data[0].end_date
        localStorage.setItem('beginDate', res.data[0].begin_date_int)
        localStorage.setItem('endDate', res.data[0].end_date_int)
        localStorage.setItem('config',JSON.stringify(res.data[0]))
        console.log("商品-获取配置信息接口", res.data[0]);
        this.getInfo();
      });
    },
    getNum() {
      console.log(this.data.stock);
    },
    returnFn() {
      this.$router.go(-1);
    },
    addFn() {
      if (this.data.status == 2) return this.cancelGoods();
      if (this.stock == 0 || !this.checked || this.mouny == 0)
        return this.$toast.fail("请填写正确内容");
      if (this.data.status == 0) return this.getGoods();
      // if (this.data.status == 0) return this.afterRead();
    },
    agreement() {
      this.$router.push("/agreement");
    },
    onConfirm() {
      this.pamShow = true;
       this.show = false;
    },
    getGoods() {
      // this.pamShow = true;
      this.show = true;
      // const data = {
      //   goods_id: this.$route.query.goods_id,
      //   user_id: localStorage.getItem("userId"),
      //   fy_price: this.stock * this.mouny * 0.1,
      //   price: this.mouny,
      //   kucun: this.stock,
      // };
      // upGood(data).then((res) => {
      //   console.log("上架接口---", res);
      //   this.pamShow = false;
      // });
    },
    cancelGoods() {
      this.$toast.success('已取消委托');
      const data = {
        goods_id: this.$route.query.goods_id,
        user_id: localStorage.getItem("userId"),
      };
      lowerGood(data).then((res) => {
        
        console.log("取消上架---", res);
        this.getInfo();
        // this.show = true;
      });
    },
    getInfo() {
      const data = {
        goods_id: this.$route.query.goods_id,
        user_id: localStorage.getItem("userId"),
      };
      getGoodInfo(data).then((res) => {
        this.$toast.clear()
        res.data.imgs = res.data.imgs.split(",");
        let arr = res.data.imgs.map((item) => {
          item = imgUrl + item;
        });
        this.data = res.data;
        this.stock = res.data.kucun;
        res.data.status == 0 ? this.mouny = res.data.price : this.mouny = parseInt((res.data.price -  res.data.fy_price) * 100) / 100
        this.money = res.data.price
        console.log(this.mouny)
        console.log(this.money)

        console.log("获取详情接口---", res.data);
      });
    },
    afterRead(file) {
      console.log(file);
      this.fileList.push(file.file);
      this.pamShow = false;
      this.payShowTwo = true;
      this.imageUrl = file.content;
      console.log(file.file);
      let param = new FormData();
      param.append("file", file.file);
      console.log("上传参数---", param);
      upLoad(param).then((res) => {
        this.$toast.clear()
        console.log("上传图片接口---", res);
        this.imageUrl = imgUrl + res.data.url;
        this.pingzheng_url = res.data.url;
      });
    },
    tijiao(type) {
      if (type == 0) {
        this.payShowTwo = false;
        this.pamShow = true;
      } else {
        const data = {
          goods_id: this.$route.query.goods_id,
          user_id: localStorage.getItem("userId"),
          // fy_price:Math.round(this.stock * this.mouny * this.zfbl),
          fy_price:(this.stock * this.mouny * this.zfbl).toFixed(2),
          // price: Math.round(this.mouny * (1 + this.zfbl)),
          price: this.mouny * (1 + this.zfbl),
          kucun: this.stock,
          pingzheng: this.pingzheng_url,
        };
        upGood(data).then((res) => {
          this.$toast.success('商品委托已提交');
          this.pamShow = false;
          this.payShowTwo = false;
          this.getInfo();
          console.log("上架接口---", res);
        });
      }
    },
  },
  mounted() {
    // this.getConfigInfo()
    this.getInfo();
    console.log(this.$route.query);
  },
};
</script>

<style lang="less" scoped>
div {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.container {
  .swiper {
    width: 100%;
    height: 250px;

    .my-swipe {
      width: 100%;
      height: 100%;

      img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .content {
    width: 100%;
    padding: 0 3%;

    .name {
      margin-top: 20px;
      letter-spacing: 1px;
      font-weight: 700;
      font-size: 1.1em;
      color: #000;
    }
    .number {
      margin-top: 20px;
      color: #999999;
      font-size: 0.6em;
    }
    .mouny {
      margin-top: 30px;
      color: #999999;
      font-size: 0.6em;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .text {
        color: #3ace8a;
        display: flex;
        justify-content: center;
        align-items: flex-end;

        span {
          margin-bottom: -3px;
        }

        /deep/ .van-field__control {
          width: 60px;
          color: #3ace8a !important;
          font-size: 1.7em;
        }
      }
    }
    .stock {
      margin-top: 20px;
      color: #999999;
      font-size: 0.6em;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .entrust {
      margin-top: 20px;
      color: #999999;
      font-size: 0.6em;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    .check {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      margin-top: 20px;
      padding-bottom: 20px;
      border-bottom: 1px solid #e5e5e5;

      /deep/ .van-checkbox__label {
        color: #333333;
        font-size: 0.9em;
      }
    }
  }
  .comContent {
    width: 100%;
    padding: 0 3%;

    .comTitle {
      margin-top: 20px;
      color: #333333;
      font-size: 1em;
      letter-spacing: 0.5px;
    }
  }
  .buttonList {
    width: 100%;
    height: 50px;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;

    div {
      width: 50%;
      height: 100%;
      text-align: center;
      line-height: 50px;
      letter-spacing: 1px;
      font-size: 1em;
    }

    div:nth-child(1) {
      background-color: #fff;
      border-top: 1px solid #ece7e7;
      color: #3ace8a;
    }

    div:nth-child(2) {
      background-color: #3ace8a;
      color: #fff;
    }
  }
  /deep/ .van-popup--center {
    border-radius: 10px;
    padding: 20px 20px 40px 20px;

    .text {
      margin-top: 10px;
      color: #333333;
      font-size: 1.1em;
      text-align: center;
    }
  }
  .dialogImg {
    width: 90%;
    margin-left: 5%;
    margin-top: 20px;
  }
  .dialogTitle {
    width: 100%;
    height: 50px;
    font-size: 1em;
    text-align: center;
    line-height: 40px;

    .myButton {
      width: 100px;
      height: 30px;
      border-radius: 5px;
      margin-right: 10px;
      margin-left: 10px;
    }
  }
  .diaImg {
    box-sizing: border-box;
    .image {
      width: 70%;
      margin: 40px auto 0px;
      //   margin-left: 17.5%;
      height: 150px;
      text-align: center;
      border: 1px solid #e5e5e5;

      img {
        height: 70%;
        margin-top: 10%;
      }
    }

    .butList {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding-bottom: 20px;

      .diaButton {
        width: 220px;
        border-radius: 5px;
        margin-top: 10px;
      }
    }
  }
  /deep/ .van-dialog__header {
    font-size: 18px;
    font-weight: 700;
    // color: #EF0A64;
  }
}
</style>